<template>
  <div>
    <div v-for="(url, index) in value" :key="index" class="image-item">
      <image-upload :value="url" @input="updateImage(index, $event)" />
      <el-button size="mini" @click="openPostSelector(index)">选择帖子</el-button>
      <span v-if="postIds[index]" style="margin-left: 10px;">
        已选帖子ID: {{ postIds[index] }}
      </span>
    </div>

    <el-dialog title="选择帖子" :visible.sync="dialogVisible" width="80%">
      <RichTextPostSelector
        mode="selector"
        @selected="onPostSelected"
        :visible.sync="dialogVisible"
      />
    </el-dialog>
  </div>
</template>

<script>
import RichTextPostSelector from "@/views/app/richText/index.vue"; // 你的帖子列表页面

export default {
  components: { RichTextPostSelector },
  props: {
    value: {                // 图片数组
      type: Array,
      default: () => []     // 原来是 undefined，现在给空数组
    },
    postIds: {              // 帖子 ID 数组
      type: Array,
      default: () => []     // 同上
    }
  },
  data() {
    return {
      dialogVisible: false,
      currentIndex: 0,
    };
  },
  methods: {
    openPostSelector(index) {
      this.currentIndex = index;
      this.dialogVisible = true;
    },
    onPostSelected(postId) {
      this.$set(this.postIds, this.currentIndex, postId);
      this.dialogVisible = false;
    },
    updateImage(index, url) {
      this.$set(this.value, index, url);
      this.$emit("input", this.value);
    },
  },
};
</script>

<style scoped>
.image-item {
  margin-bottom: 10px;
}
</style>
